<template>
  <div>
    <div class="main">
      <el-row>
        <el-card>
          <div>
            <el-col span="16">
              <div>数据统计</div>
              <div :style="{ display: 'flex' }">
                <div class="item">
                  <div :style="{ margin: '0 auto', textAlign: 'center' }">
                    <div class="num">88</div>
                    <div class="num2">在读学员</div>
                  </div>
                </div>
                <el-divider direction="vertical" />
                <div class="item">
                  <div :style="{ margin: '0 auto', textAlign: 'center' }">
                    <div class="num">1850</div>
                    <div class="num2">在职老师</div>
                  </div>
                </div>
                <el-divider direction="vertical" border-style="dashed" />
                <div class="item">
                  <div :style="{ margin: '0 auto', textAlign: 'center' }">
                    <div class="num">2649.5</div>
                    <div class="num2">剩余课时</div>
                  </div>
                </div>
                <el-divider direction="vertical" border-style="dashed" />
                <div class="item">
                  <div :style="{ margin: '0 auto', textAlign: 'center' }">
                    <div class="num">¥305799.84</div>
                    <div class="num2">剩余学费</div>
                  </div>
                </div>
              </div>
            </el-col>
          </div>
        </el-card>
      </el-row>
      <el-row :style="{ marginTop: '15px' }" gutter="">
        <el-col span="6">
			
		  <el-card>
			 <div class="item2">
              <div>本周总收入(元)</div>
              <div :style="{fontSize:'28px',marginTop:'5px'}" >200</div>
              <div :style="{marginTop:'25px'}">
                <div :style="{fontSize:'4px'}">较上周 <Top /> 2,400%</div>
                <div :style="{fontSize:'4px'}">上周总8元</div>
              </div>
            </div>
		  </el-card>
		</el-col>
		 <el-col span="6">
		  <el-card>
			 <div class="item2">
              <div>本周总收入(元)</div>
              <div :style="{fontSize:'28px' ,marginTop:'5px'}" >200</div>
              <div :style="{marginTop:'25px'}">
                <div :style="{fontSize:'4px'}">较上周-</div>
                <div :style="{fontSize:'4px'}">上周总0元</div>
              </div>
            </div>
		  </el-card>
		</el-col>
		 <el-col span="6">
		  <el-card>
			 <div class="item2">
              <div>本周总收入(元)</div>
              <div :style="{fontSize:'28px' ,marginTop:'5px'}" >200</div>
              <div :style="{marginTop:'25px'}">
                <div :style="{fontSize:'4px'}">较上周-</div>
                <div :style="{fontSize:'4px'}">上周总2494.05元</div>
              </div>
            </div>
		  </el-card>
		</el-col>
		 <el-col span="6">
		  <el-card>
			 <div class="item2">
              <div>本周总收入(元)</div>
              <div :style="{fontSize:'28px' ,marginTop:'5px'}" >200</div>
              <div :style="{marginTop:'25px'}">
                <div :style="{fontSize:'4px'}">较上周-</div>
                <div :style="{fontSize:'4px'}">上周总0次(¥0)</div>
              </div>
            </div>
		  </el-card>
		</el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { Top } from "element-plus";
</script>

<style lang="scss" scoped>
.main {
  margin: 10px;
}
.item {
  text-align: "center";
  width: 300px;
  display: flex;
  align-items: center;
}
.num {
  font-size: 28px;
  height: 26px;
}
.num2 {
  color: #909399;
  font-size: 8px;
  margin-top: 5px;
  height: 26px;
}
.el-divider {
  font-size: 50px;
}
.el-col {
  padding: 15px;
}
.item2 {
  width: 240px;
  height: 160px;
  text-align: right;
}
</style>
